<template>
  <view class="comment">
    <cu-custom bgColor="bg-gradual-pink" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">我的评论</block>
    </cu-custom>
    <view class="cu-load load-modal" v-if="loadModal">
      <!-- <view class="cuIcon-emojifill text-orange"></view> -->
      <image :src="imgUrl+'static/loading.gif'" mode="aspectFit"></image>
      <view class="gray-text">{{hint}}</view>
    </view>
    <view class="cu-list menu-avatar message">
      <block v-if="commData.length>0">
        <view v-for="(item,index) in commData" :key="index" class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''"
          @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" @click='todetail'
          :data-target="'move-box-'+index" :data-id='item.article_id'>
          <view class="cu-avatar round lg" :style="'background-image:url('+item.user[0].user_cover+');'"></view>
          <view class="content">
            <view class="text-grey text-sm text-cut cite">评论：{{item.comment_body}}</view>
            <view class="text-gray text-sm cite">
              <text class="cuIcon-form text-purple"></text> {{item.blog[0].article_title}}
            </view>
          </view>
          <view class="action">
						<view class="cu-tag round bg-red sm" :class="item.status==1?'bg-green': item.status==2?'bg-red': 'bg-orange'" v-if='isExamine'>{{item.status==1?'通过':item.status==2?'未通过':'审核中'}}
						</view>
            <view class="text-red text-xs">{{item.comment_time}}</view>
          </view>
          <view class="move">
            <view class="bg-red" :data-id='item._id' @click.stop='toDelect'>删除</view>
          </view>
        </view>
      </block>
      <view class="noData" v-else>
        <image :src="imgUrl+'static/noNews.jpg'"  class="noImg" mode="aspectFit"></image>
        <text class="noTitle">暂无数据</text>
      </view>
    </view>
  </view>
</template>

<script>
  import util from '../../utils/time.js';
  export default {
    data() {
      return {
        imgUrl:getApp().globalData.imgUrl,
				isExamine:getApp().globalData.isExamine,
        loadModal: false, //加载
        pageInex: 1, //第一页
        pageSize: 10, //每页条数
        hint: '加载中...',
        user_id: null,
        TouchStart: 0,
        ListTouchDirection: null,
        modalName: null,
        commData: [],
        userInfo: {}
      }
    },
    onLoad: function(option) {
			let userInfo =getApp().globalData.userInfo;
			if (Object.keys(userInfo).length>0) {
        this.user_id = userInfo.user_id;
        this.getCommen()
      } else {
        uni.navigateTo({
          url: '../login/login',
        })
      }
    },
    methods: {
      todetail(e) {
        wx.vibrateShort({})
        let id = e.currentTarget.dataset.id;
        wx.navigateTo({
          url: '../home/read?id=' + id,
        })
      },
      getCommen(refresh = '') {
        this.hint = refresh == 'below' ? '刷新中...' : '加载中...';
        this.loadModal = true;
        if (refresh == 'below') {
          this.commData = {};
        } //清空列表
        wx.cloud.callFunction({
          name: 'myComment',
          data: {
            user_id: this.user_id,
            pageInex: this.pageInex,
            pageSize: this.pageSize
          },
          success: res => {
            this.loadModal = false;
            uni.stopPullDownRefresh();

            let list = res.result.list
            list.map(item => {
              item.comment_time = util(parseInt(item.comment_time));
            })
            this.commData = this.pageInex == 1 ? list : [...this.commData, ...list];
            // console.log(res)
          },
          fail: err => {
            console.error('[云函数] [myComment] 调用失败', err)
          }
        })
      },
      // ListTouch触摸开始
      ListTouchStart(e) {
        this.TouchStart = e.touches[0].pageX;
      },

      // ListTouch计算方向
      ListTouchMove(e) {
        this.ListTouchDirection = e.touches[0].pageX - this.TouchStart > 0 ? 'right' : 'left';
      },

      // ListTouch计算滚动
      ListTouchEnd(e) {
        if (this.ListTouchDirection == 'left') {
          this.modalName = e.currentTarget.dataset.target
        } else {
          this.modalName = null
        }
        this.ListTouchDirection = null
      },
      //删除
      toDelect(e) {
        let id = e.currentTarget.dataset.id;
        wx.cloud.callFunction({
          name: 'delDomment',
          data: {
            id:id
          },
          success: res => {
            if (res.result.errMsg=="collection.remove:ok") { //删除成功
							for(let i=0;i<this.commData.length;i++){
								if(this.commData[i]._id==id){
									this.commData.splice(i, 1); 
								}
							}
              // this.getCommen()
            } 
          },
          fail: err => {
            console.error('[云函数] [delDomment] 调用失败', err)
          }
        })
      }
    },
    onPullDownRefresh() { //下拉刷新
      this.pageInex = 1;
      this.getCommen('below');
      // console.log('onPullDownRefresh');
    },
    onReachBottom() { //上拉加载
      this.pageInex = this.pageInex + 1;
      this.getCommen('up');
      // console.log('onReachBottom');
    }
  }
</script>

<style>
  page{
    background: #fff;
  }
	.cite{
		overflow: hidden;
		 -webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
</style>
